<template>
  <div class="landlordTenant">
    <div v-if="renterList.length > 0">
    <div v-for="(item,index) in renterList"  :key="index" class="landlordTenant-box">
      <div class="landlordTenant-top">
        <div class="land-t">
          <div class="landlordTenant-img">
            <!-- <img v-if="item.webUser.headImgUrl" :src="item.webUser.headImgUrl" alt=""> -->
            <img :src="require('../../../images/avatar_default.png')" alt="">
          </div>
          <div class="landlordTenant-nav">
            <div><span class="color-000">{{item.renterName}}</span><span class="landlordTenant-zk">租客</span></div>
            <div><span class="color-666">{{item.renterMobile}}</span></div>
            <a class="landlordTenant-phone" :href="'tel:' + item.renterMobile"><img src="../../../images/phone.png" alt=""></a>
          </div>
        </div>
      </div>
      <div class="landlordTenant-center">
        <div class="land-c">
          <p v-if="item.communityName"><span class="color-777">房租地址：</span><span class="land-r">{{item.communityName}}</span></p>
          <p><span class="color-777">已租时长：</span><span class="land-r">{{item.rentForDays > 0 ? item.rentForDays : 0}}天</span></p>
          <!-- <p><span class="color-777">已租时长：</span><span class="land-r">{{calculate(item.createTime)}}个月</span></p> -->
          <p><span class="color-777">合同截止日期：</span><span class="land-r">{{item.endTime | IOSformatDate}}</span></p>
        </div>
      </div>
    </div>
    </div>
    <no-data v-else><span slot="message">您还没有租客信息哦~</span></no-data>
  </div>
</template>

<script>
import noData from '@/components/noData'
export default {
  name: 'landlordTenant',
  data () {
    return {
      renterList: [],
      noMoreData: false,
      moreData: false,
      pageSize: 1000,
      page: 1
    }
  },
  components: {
    noData
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      let id = JSON.parse(localStorage.getItem('userInfo')).id
      this.$axiosPosting(this.$api.getRenterList, {landlordId: id, pageSize: this.pageSize, page: this.page}).then(json => {
        if (json.code === '0000') {
          this.renterList = json.data.list
        }
      })
    },
    // 已租时长
    calculate (str) {
      let pastWhen = str.split('-')
      let today = new Date()
      let datePastWhen = +pastWhen[0] * 12 + +pastWhen[1]
      let datecurrent = today.getFullYear() * 12 + today.getMonth() + 1
      let m = Math.abs(datecurrent - datePastWhen)
      return m
    }
  }
}
</script>

<style lang="less" scoped>
  .landlordTenant{
    /*padding: 0 .75rem;*/
    .landlordTenant-box{
      border-bottom: 6px solid #f8f8f8;
    }
    .landlordTenant-top{
      overflow: hidden;
      .land-t{
        padding: 0 .75rem;
        .landlordTenant-img{
          width: 2.25rem;
          height: 3.85rem;
          float: left;
          img{
            border-radius: 50%;
            width: 2.1rem;
            height: 2.1rem;
            position: relative;
            top: 1rem;
          }
        }
        .landlordTenant-nav{
          position: relative;
          width: 86%;
          float: left;
          padding-top: 1rem;
          .color-000{
            color: #000;
            font-size: 16px;
            line-height: 1.1rem;
            padding-left: 0.5rem;
          }
          .color-666{
            color: #666;
            font-size: 14px;
            line-height: 1.1rem;
            padding-left:0.5rem;
          }
          .landlordTenant-zk{
            display: inline-block;
            width: 1.95rem;
/*            line-height: 0.7rem;*/
            background-color: #ff9600;
            color: #fff;
            border-radius: 4px;
            text-align: center;
            margin-left: .25rem;
            font-size: 10px;
          }
          .landlordTenant-phone{
            position: absolute;
            right: 0;
            top: 1rem;
            width: 1.95rem;
            height: 1.95rem;
            img{
              width: 1.95rem;
              height: 1.95rem;
              border-radius: 50%;
            }
          }
        }
      }
    }
    .landlordTenant-center{
      // background-color: #f8f8f8;
      overflow: hidden;
      .land-c{
        padding:.75rem;
        padding-top: 0.2rem;
        p{
          line-height: 1rem;
           font-size: 14px;
           overflow: hidden;
          .color-777{
            color:#777;
          }
          .land-r{
            float: right;
            color:#333333;
          }
        }
      }
    }
    .load-more{
      font-size: 15px;
      text-align: center;
      color:#ff9600;
      height: 50px;line-height: 50px;
      background: #fff;
      border-top: 1px solid #eee;
    }
  }
</style>
